<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <style>
        .mydiv{
            width:200px;
            height: 200px;
            /* border:1px solid red; */
            background:red;
        }
    </style>
    <script>
        $(function(){
            $("input:eq(0)").click(function(){
                $(".mydiv").hide(2000,function(){
                    alert("隐藏完毕");
                });
            });
            $("input:eq(1)").click(function(){
                // speed:slow、normal、fast、毫秒值
                $(".mydiv").show("slow",function(){
                    alert("显示完毕");
                });
            });
            $("input:eq(2)").click(function(){
                $(".mydiv").fadeOut(2000);
            });
            $("input:eq(3)").click(function(){
                $(".mydiv").fadeIn(2000);
            });
            $("input:eq(4)").click(function(){
                $(".mydiv").slideUp(1000);
            });
            $("input:eq(5)").click(function(){
                $(".mydiv").slideDown(1000);
                
            });
            $("input:eq(6)").click(function(){
                $(".mydiv").animate({
                    width:"400px",
                    height:"400px"
                },2000,function(){
                    $(".mydiv").animate({
                        width:"0px",
                        height:"0px"
                    },1000,function(){
                        alert("动画执行完毕");
                    });
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="隐藏">
    <input type="button" value="显示">
    <input type="button" value="淡出">
    <input type="button" value="淡入">
    <input type="button" value="上滑">
    <input type="button" value="下滑">
    <input type="button" value="自定义动画">
    <div class="mydiv">mydiv</div>
</body>
</html>